<template>
  <div class="viewport view-sign-in">
    <r-logo class="logo"/>
    <div class="box">
      <ul class="sign-types">
        <li v-for="it in signTypes"
            :key="it.code"
            :class="{active: it.code === signType}"
            @click="signType = it.code"
        >{{it.name}}</li>
      </ul>
      <input type="number" v-model="mobile" placeholder="请输入手机号"/>
      <input type="text" v-model="password" placeholder="请输入密码" v-if="signByPassword"/>
      <template v-if="signByVerifyCode">
        <input type="text" v-model="verifyCode" placeholder="请输入验证码"/>
        <r-btn-countdown class="btn-countdown" @click="sendVerifyCode" v-model="count"/>
      </template>
      <r-btn primary block :disabled="signDisabled" @click="sign">登录</r-btn>

      <div class="bar" v-if="signByPassword">
        <span>
          <router-link to="/sign-up" class="link-sign-up">注册</router-link>成为会员
        </span>
        <router-link to="/reset" class="link-pwd-reset">我忘记了密码</router-link>
      </div>
      <div class="bar" v-if="signByVerifyCode">
        <p>温馨提示：未注册的手机号码，登录时将自动注册，且代表您已同意我们的
          <router-link to="/terms" class="link-terms">《服务协议》</router-link>。</p>
      </div>
    </div>

  </div>
</template>
<script>
import RLogo from '../components/r-logo'
import RBtn from '../components/r-btn'
import RBtnCountdown from '../components/r-btn-countdown'
import signTypes from '../data/signTypes'
import {SET_SIGN_TYPE} from '../store/mutationTypes'
import {mapGetters} from 'vuex'

export default {
  name: 'view-sign-in',
  components: {
    RLogo,
    RBtn,
    RBtnCountdown
  },
  data () {
    return {
      signTypes,
      mobile: '',
      password: '',
      verifyCode: '',
      count: false,
      signDisabled: false
    }
  },
  computed: {
    signType: {
      get () {
        return this.$store.getters.signType
      },
      set (signType) {
        this.$store.commit(SET_SIGN_TYPE, {signType})
      }
    },
    ...mapGetters(['signByVerifyCode', 'signByPassword'])
  },
  methods: {
    sign () {
      //
    },
    sendVerifyCode () {
      this.count = true
    }
  }
}
</script>
<style lang="scss">
  @import "../styles/index";

  .view-sign-in {
    .box {
      width: 300px;
      margin: 5px auto;
      border-radius: 2px;
    }

    .sign-types {
      @extend %flex-center;
      font-size: 16px;
      line-height: 42px;

      li {
        text-align: center;
        width: 120px;
        flex: 1;
      }

      li + li {
        @extend %left-before-thin;

        &::before {
          width: 3px;
          top: 30%;
          height: 40%;
          background-color: $color-line-weight;
        }
      }

      .active {
        color: $color-primary;

        &::after {
          height: 3px;
          background-color: $color-primary;
        }
      }
    }

    input {
      line-height: 24px;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 3px;
      box-sizing: border-box;
      width: 100%;
      margin: 6px 0;
    }

    .btn-countdown {
      float: right;
      height: 40px;
      margin-top: -47px;
      @extend %left-before-thin;

      &::before {
        height: 60%;
        top: 20%;
        background-color: $color-line-weight;
      }
    }

    .bar {
      @extend %flex-justify;
      margin: -10px 0 10px;

      p {
        font-size: 12px;
        margin: 5px 0;
      }
    }

    .link-sign-up {
      padding: 5px 0;
      line-height: 28px;
      color: $color-primary;
      font-weight: bold;
    }

    .link-pwd-reset {
      font-size: 13px;
      text-decoration: underline;
      padding: 5px 0;
    }

    .link-terms {
      color: $color-primary;
      text-decoration: underline;
    }
  }
</style>
